<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<script type="text/javascript" src="./dist/jquery-3.2.1.js"></script>
	<script type="text/javascript" src="./dist/js/bootstrap.js"></script>
	<link rel="stylesheet" type="text/css" href="./dist/css/bootstrap.css">
	<link rel="stylesheet" type="text/css" href="./font/iconfont.css">
	<title></title>
</head>
<style type="text/css">
	*{margin:0;padding:0;}
	.navs{margin:15px 15px;display:none;}
	.img{width:100%;height:200px;}
</style>
<body>
<div class='container'>
	<h2>小说阅读页面</h2>
	<div class='col-md-2'>
		<ul class='nav nav-pills nav-stacked'>
			<li class='active'><a href="">第一章</a></li>
			<li><a href="">第二章</a></li>
			<li><a href="">第三章</a></li>
			<li><a href="">第四章</a></li>
			<li><a href="">第五章</a></li>
		</ul>
	</div>

	<div class='col-md-10'>
		<div class='row navs'>
			<img src="./picture/one.jpg" class='img'>
			<p><h2>the chapter one:</h2>Begin by pointing out that economics is a subject that students must confront in their daily lives. Point out that they already spend a great deal of their time thinking about economic issues: changes in prices, buying decisions, use of their time, concerns about employment, etc.</p>
		</div>
		<div class='row navs'>
			<img src="./picture/two.jpg" class='img'>
			<p><h2>the chapter two:</h2>Begin by pointing out that economics is a subject that students must confront in their daily lives. Point out that they already spend a great deal of their time thinking about economic issues: changes in prices, buying decisions, use of their time, concerns about employment, etc.</p>
		</div>
		<div class='row navs'>
			<img src="./picture/seven.jpg" class='img'>
			<p><h2>the chapter three:</h2>Begin by pointing out that economics is a subject that students must confront in their daily lives. Point out that they already spend a great deal of their time thinking about economic issues: changes in prices, buying decisions, use of their time, concerns about employment, etc.</p>
		</div>
		<div class='row navs'>
			<img src="./picture/nine.jpg" class='img'>
			<p><h2>the chapter four:</h2>Begin by pointing out that economics is a subject that students must confront in their daily lives. Point out that they already spend a great deal of their time thinking about economic issues: changes in prices, buying decisions, use of their time, concerns about employment, etc.</p>
		</div>
		<div class='row navs'>
			<img src="./picture/five.jpg" class='img'>
			<p><h2>the chapter five:</h2>Begin by pointing out that economics is a subject that students must confront in their daily lives. Point out that they already spend a great deal of their time thinking about economic issues: changes in prices, buying decisions, use of their time, concerns about employment, etc.</p>
		</div>
	</div>
</div>
</body>
<script type="text/javascript">
	$('li').mouseenter(function(){
		$(this).addClass('active');
		$('li').not($(this)).removeClass('active');

		idx=$(this).index('li');
		$('.navs').eq(idx).stop().show(100);
		$('.navs').not($('.navs').eq(idx)).stop().hide(100);
	});
	$('.navs').eq(0).show(100);

</script>
</html>